<template>
    <el-card style="width: 100%;border-radius: 15px;" shadow="always">
        <div class="tableBox">
            <div class="A">
                <div v-for="item, index in ListA" @click="getItem(item)" class="boxx">
                    <span>{{ item.locationName }}</span>
                    <div v-if="item.statusAdjustment"
                        :style="item.statusAdjustment.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                        class="gj1"></div>
                    <div v-if="item.statusAdjustmentTwo"
                        :style="item.statusAdjustmentTwo.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                        class="gj2"></div>
                    <div v-if="item.statusAdjustmentThree"
                        :style="item.statusAdjustmentThree.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                        class="gj3"></div>
                </div>
                <!-- <div class="boxx" @click="dialogVisible = true">
                    A

                </div> -->
            </div>
            <div class="B">
                <div v-for="item, index in ListB" @click="getItem(item)" class="boxx">
                    <span>{{ item.locationName }}</span>
                    <div v-if="item.statusAdjustment"
                        :style="item.statusAdjustment.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                        class="gj1"></div>
                    <div v-if="item.statusAdjustmentTwo"
                        :style="item.statusAdjustmentTwo.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                        class="gj2"></div>
                    <div v-if="item.statusAdjustmentThree"
                        :style="item.statusAdjustmentThree.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                        class="gj3"></div>
                </div>
            </div>
            <div class="C">
                <div v-for="item, index in ListC" @click="getItem(item)" class="boxx">
                    <span>{{ item.locationName }}</span>
                    <div v-if="item.statusAdjustment"
                        :style="item.statusAdjustment.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                        class="gj1"></div>
                    <div v-if="item.statusAdjustmentTwo"
                        :style="item.statusAdjustmentTwo.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                        class="gj2"></div>
                    <div v-if="item.statusAdjustmentThree"
                        :style="item.statusAdjustmentThree.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                        class="gj3"></div>
                </div>
            </div>
            <div class="D">
                <div v-for="item, index in ListD" @click="getItem(item)" class="boxx">
                    <span>{{ item.locationName }}</span>
                    <div v-if="item.statusAdjustment"
                        :style="item.statusAdjustment.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                        class="gj1"></div>
                    <div v-if="item.statusAdjustmentTwo"
                        :style="item.statusAdjustmentTwo.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                        class="gj2"></div>
                    <div v-if="item.statusAdjustmentThree"
                        :style="item.statusAdjustmentThree.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                        class="gj3"></div>
                </div>
            </div>
            <div class="H">
                <div v-for="item, index in ListH" @click="getItem(item)" class="boxx">
                    <span>{{ item.locationName }}</span>
                    <div v-if="item.statusAdjustment"
                        :style="item.statusAdjustment.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                        class="gj1"></div>
                    <div v-if="item.statusAdjustmentTwo"
                        :style="item.statusAdjustmentTwo.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                        class="gj2"></div>
                    <div v-if="item.statusAdjustmentThree"
                        :style="item.statusAdjustmentThree.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                        class="gj3"></div>
                </div>
            </div>
            <div class="E">
                <div v-for="item, index in ListE" @click="getItem(item)" class="boxx">
                    <span>{{ item.locationName }}</span>
                    <div v-if="item.statusAdjustment"
                        :style="item.statusAdjustment.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                        class="gj1"></div>
                    <div v-if="item.statusAdjustmentTwo"
                        :style="item.statusAdjustmentTwo.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                        class="gj2"></div>
                    <div v-if="item.statusAdjustmentThree"
                        :style="item.statusAdjustmentThree.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                        class="gj3"></div>
                </div>
            </div>
            <div class="F">
                <div v-for="item, index in ListF" @click="getItem(item)" class="boxx">
                    <span>{{ item.locationName }}</span>
                    <div v-if="item.statusAdjustment"
                        :style="item.statusAdjustment.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                        class="gj1"></div>
                    <div v-if="item.statusAdjustmentTwo"
                        :style="item.statusAdjustmentTwo.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                        class="gj2"></div>
                    <div v-if="item.statusAdjustmentThree"
                        :style="item.statusAdjustmentThree.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                        class="gj3"></div>
                </div>
            </div>
            <div v-if="ListG.length != 0" class="G">
                <div @click="getItem(ListG[0])" class="boxx">
                    <span>{{ ListG[0].locationName }}</span>
                    <div v-if="ListG[0].statusAdjustment"
                        :style="ListG[0].statusAdjustment.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                        class="gj1"></div>
                    <div v-if="ListG[0].statusAdjustmentTwo"
                        :style="ListG[0].statusAdjustmentTwo.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                        class="gj2"></div>
                    <div v-if="ListG[0].statusAdjustmentThree"
                        :style="ListG[0].statusAdjustmentThree.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                        class="gj3"></div>
                </div>
                <div style="display: flex;">
                    <div @click="getItem(ListG[1])" class="boxx">
                        <span>{{ ListG[1].locationName }}</span>
                        <div v-if="ListG[1].statusAdjustment"
                            :style="ListG[1].statusAdjustment.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                            class="gj1"></div>
                        <div v-if="ListG[1].statusAdjustmentTwo"
                            :style="ListG[1].statusAdjustmentTwo.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                            class="gj2"></div>
                        <div v-if="ListG[1].statusAdjustmentThree"
                            :style="ListG[1].statusAdjustmentThree.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                            class="gj3"></div>
                    </div>
                    <div @click="getItem(ListG[2])" class="boxx">
                        <span>{{ ListG[2].locationName }}</span>
                        <div v-if="ListG[2].statusAdjustment"
                            :style="ListG[2].statusAdjustment.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                            class="gj1"></div>
                        <div v-if="ListG[2].statusAdjustmentTwo"
                            :style="ListG[2].statusAdjustmentTwo.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                            class="gj2"></div>
                        <div v-if="ListG[2].statusAdjustmentThree"
                            :style="ListG[2].statusAdjustmentThree.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                            class="gj3"></div>
                    </div>
                    <div @click="getItem(ListG[3])" class="boxx">
                        <span>{{ ListG[3].locationName }}</span>
                        <div v-if="ListG[3].statusAdjustment"
                            :style="ListG[3].statusAdjustment.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                            class="gj1"></div>
                        <div v-if="ListG[3].statusAdjustmentTwo"
                            :style="ListG[3].statusAdjustmentTwo.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                            class="gj2"></div>
                        <div v-if="ListG[3].statusAdjustmentThree"
                            :style="ListG[3].statusAdjustmentThree.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                            class="gj3"></div>
                    </div>
                </div>
                <div @click="getItem(ListG[4])" class="boxx">
                    <span>{{ ListG[4].locationName }}</span>
                    <div v-if="ListG[4].statusAdjustment"
                        :style="ListG[4].statusAdjustment.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                        class="gj1"></div>
                    <div v-if="ListG[4].statusAdjustmentTwo"
                        :style="ListG[4].statusAdjustmentTwo.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                        class="gj2"></div>
                    <div v-if="ListG[4].statusAdjustmentThree"
                        :style="ListG[4].statusAdjustmentThree.statusChinese == '存在轧辊' ? 'background-color: green' : 'background-color: red;'"
                        class="gj3"></div>
                </div>
            </div>
            <div class="msgbox">
                <div style="display: flex;align-items: center;">
                    <div class="droptarget" style="background-color: green">

                    </div>
                    <span>有辊框</span>
                </div>
                <div style="display: flex;align-items: center;">
                    <div class="droptarget" style="background-color: red">

                    </div>
                    <span>无辊框</span>
                </div>
            </div>
            <div class="cbl cb" @click="drawer = true, status = 1, selectTask()">
                任<br>
                务<br>
                列<br>
                表
            </div>
            <div class="cbl2 cb" @click="drawer = true, status = 2, getData()">
                智<br>
                能<br>
                备<br>
                辊
            </div>
            <div class="cbl3 cb" @click="drawer = true, status = 3">
                数<br>
                据<br>
                分<br>
                析
            </div>
            <div class="cbl4 cb" @click="resetRollForm(), getRollData(), drawer = true, status = 4">
                手<br>
                动<br>
                备<br>
                辊
            </div>
            <el-drawer v-model="drawer" :size="status == 1 ? '60%' : status == 2 ? '60%' : status == 3 ? '38%' : '65%'"
                :title="status == 1 ? '任务列表' : status == 2 ? '智能备辊' : status == 3 ? '数据分析' : '手动备辊'" direction="rtl"
                :before-close="handleClose">
                <el-card v-if="status != 3" style="width: 100%px;padding: 2px" shadow="hover">

                    <div v-if="status == 1"
                        style="display: flex;flex-wrap: wrap;justify-content: space-between;white-space: nowrap;">
                        <div style="display: flex;align-items:center;">
                            任务类型
                            &nbsp;
                            <el-select style="width: 200px;" v-model="form.mainTaskType" @change="selectTask()"
                                placeholder="请选择任务类型">
                                <el-option label="入库任务" :value="1" />
                                <el-option label="出库任务" :value="2" />
                                <el-option label="机器人任务" :value="3" />
                                <el-option label="单步任务" :value="4" />
                                <el-option label="异常任务" :value="6" />
                            </el-select>
                        </div>
                        &nbsp;
                        <div style="display: flex;align-items:center;">
                            任务状态
                            &nbsp;
                            <el-select style="width: 200px;" v-model="form.mainFinishStatus" @change="selectTask()"
                                placeholder="请选择任务状态">
                                <el-option label="全部" :value="-1" />
                                <el-option label="异常步骤" :value="-2" />
                                <el-option label="异常周转区" :value="1" />
                                <el-option label="中间辊存放区" :value="2" />
                                <el-option label="工作辊存放区" :value="3" />
                                <el-option label="待磨区" :value="4" />
                                <el-option label="中间辊缓存区" :value="5" />
                            </el-select>
                        </div>
                        &nbsp;
                        <el-button type="primary" size="mini" class="button" color="#36f"
                            @click="selectTask();">查询</el-button>
                        <el-table :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#666' }"
                            style="margin-top: 10px;width: 100% " :data="tableData" class="table">
                            <!-- <el-table-column prop="mainOrder" label="序号"></el-table-column> -->
                            <el-table-column prop="mainTaskNo" label="主任务流水号"></el-table-column>
                            <el-table-column prop="mainTaskType" label="任务类型" width="110">
                                <template #default="scope">
                                    <span v-if="scope.row.mainTaskType == 1">入库任务</span>
                                    <span v-if="scope.row.mainTaskType == 2">出库任务</span>
                                    <!-- <span v-if="scope.row.mainTaskType == 3">机器人任务</span> -->
                                    <span v-if="scope.row.mainTaskType == 4">单步任务</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="mainBoxName" label="辊框号"></el-table-column>
                            <el-table-column prop="statusAdjustment.statusChinese" width="110" label="执行状态">

                            </el-table-column>
                            <el-table-column prop="mainCreateTime" label="创建时间"></el-table-column>

                            <el-table-column label="优先级" width="100">
                                <template #default="scope">
                                    <el-switch @change="updlevel($event, scope.row)" :active-value="10"
                                        :inactive-value="5" v-model="scope.row.processLevel" />
                                </template>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template #default="scope" width="250">
                                    <el-button type="danger" @click="upd(scope.row)">终止</el-button>
                                    <el-button type="primary" @click="RowSelect(scope.row)">子任务</el-button>
                                </template>
                            </el-table-column>

                            <template v-slot:empty>
                                <el-empty description="暂无数据" />
                            </template>
                        </el-table>
                        <el-pagination style="margin: 20px 0" page-size="50" @current-change="handlePageChange2"
                            background layout="prev, pager, next" :total="total" />
                    </div>
                    <div v-if="status == 2" style="display: flex;flex-wrap: wrap;justify-content: space-between">
                        <div style="display: flex;align-items:center;">
                            轧辊类型
                            &nbsp;
                            <el-select v-model="formx.rollType" style="width: 110px" @change="getData()"
                                placeholder="轧辊类型">
                                <el-option label="一中间辊" :value="1" />
                                <el-option label="二中间辊" :value="3" />
                                <el-option label="工作辊" :value="2" />
                                <el-option label="支撑辊" :value="4" />
                            </el-select>
                        </div>
                        <div style="display: flex;align-items:center;">
                            位置名称
                            &nbsp;
                            <el-input v-model="formx.position" style="width: 110px" placeholder="位置名称" clearable />
                        </div>
                        <div style="display: flex;align-items:center;">
                            轧辊号
                            &nbsp;
                            <el-input v-model="formx.productName" style="width: 110px" placeholder="轧辊号" clearable />

                        </div>
                        <div style="display: flex;align-items:center;">
                            最大直径(mm)
                            &nbsp;
                            <el-input v-model="formx.endProductDiameter" type="number" step="0.01" style="width: 90px"
                                placeholder="最大直径" clearable />

                        </div>
                        <div style="display: flex;align-items:center;">

                        </div>
                        <div style="display: flex;align-items:center;">
                            最小直径(mm)
                            &nbsp;
                            <el-input v-model="formx.originProductDiameter" type="number" step="0.01"
                                style="width: 90px" placeholder="最小直径" clearable />
                        </div>
                        &nbsp;
                        <el-button type="primary" size="mini" class="button" color="#36f"
                            @click="getData();">查询</el-button>
                        <el-table :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#666' }"
                            style="margin-top: 10px;width: 100% " max-height="680" :data="tableDataBg" class="table">
                            <el-table-column prop="locationRegion" label="位置区域"></el-table-column>
                            <el-table-column prop="locationName" label="位置名称"></el-table-column>
                            <el-table-column prop="locationFloorStatus" label="层数"></el-table-column>
                            <el-table-column label="位置状态" prop="statusAdjustment.statusChinese">
                                <template #default="scope">
                                    <span v-if="scope.row.locationStatus == 1">空闲</span>
                                    <span v-if="scope.row.locationStatus == 2">已占用</span>
                                    <span v-if="scope.row.locationStatus == 3">存在辊架</span>
                                    <span v-if="scope.row.locationStatus == 4">搬运辊架中</span>
                                    <span v-if="scope.row.locationStatus == 5">允许放货</span>
                                    <span v-if="scope.row.locationStatus == 6">存在轧辊</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="range" label="直径范围(mm)"></el-table-column>
                            <el-table-column label="操作" width="170">
                                <template #default="scope">
                                    <el-button type="primary" @click="selectProductName(scope.row, 1)">排产</el-button>
                                    <el-button type="primary" @click="selectProductName(scope.row, 2)">详情</el-button>
                                </template>
                            </el-table-column>
                            <template v-slot:empty>
                                <el-empty description="暂无数据" />
                            </template>
                        </el-table>
                    </div>
                    <div v-if="status == 4"
                        style="display: flex;flex-wrap: wrap;justify-content: space-between;white-space: nowrap;">
                        <div style="display: flex;align-items:center;">
                            轧辊类型
                            &nbsp;
                            <el-select v-model="rollForm.RollType" style="width: 110px" placeholder="轧辊类型">
                                <el-option label="一中间辊" value="一中间辊" />
                                <el-option label="二中间辊" value="二中间辊" />
                                <el-option label="工作辊" value="工作辊" />
                                <el-option label="支撑辊" value="支撑辊" />
                            </el-select>
                        </div>
                        <div style="display: flex;align-items:center;">
                            辊框号
                            &nbsp;
                            <el-input v-model="rollForm.Num" style="width: 110px" placeholder="辊框号" clearable />
                        </div>
                        <div style="display: flex;align-items:center;">
                            辊框位置
                            &nbsp;
                            <el-input v-model="rollForm.Position" style="width: 110px" placeholder="辊框位置" clearable />
                        </div>
                        <div v-for="index in 6" :key="index"
                            style="display: flex;justify-content: space-between;width: 100%;margin-top: 10px">
                            <div style="display: flex;align-items:center;">
                                <el-tag size="large" type="primary">{{ index }}号</el-tag>&nbsp;轧辊号
                                &nbsp;
                                <el-input v-model="rollForm['Rollnum' + index]" style="width: 110px" placeholder="辊槽号"
                                    clearable />
                            </div>
                            <div style="display: flex;align-items:center;">
                                直径(mm)
                                &nbsp;
                                <el-input v-model="rollForm['Diameter' + index]" style="width: 110px" placeholder="轧辊直径"
                                    clearable />
                            </div>
                            <div style="display: flex;align-items:center;">
                                粗糙度
                                &nbsp;
                                <el-input v-model="rollForm['rough' + index]" style="width: 110px" placeholder="粗糙度"
                                    clearable />
                            </div>
                            <div style="display: flex;align-items:center;">
                                锥度
                                &nbsp;
                                <el-input v-model="rollForm['Taper' + index]" style="width: 110px" placeholder="锥度"
                                    clearable />
                            </div>
                            <div style="display: flex;align-items:center;">
                                凸度
                                &nbsp;
                                <el-input v-model="rollForm['concavity' + index]" style="width: 110px" placeholder="凸度"
                                    clearable />
                            </div>
                            <div style="display: flex;align-items:center;">
                                轧辊位置
                                &nbsp;
                                <el-input v-model="rollForm['spare' + index]" style="width: 110px" placeholder="轧辊位置"
                                    clearable />
                            </div>
                        </div>

                    </div>
                </el-card>

                <div style="width: 100%;display: flex;justify-content: end">
                    <el-button v-if="status == 4" type="primary" style="margin-top: 20px;width: 130px"
                        @click="rollSubmit">
                        提交
                    </el-button>
                </div>
                <br />
                <el-card v-if="status == 4" style="width: 100%px;padding: 2px" shadow="hover">
                    <div style="display: flex;flex-wrap: wrap;white-space: nowrap;">
                        <div style="display: flex;align-items:center;">
                            时间范围
                            &nbsp;
                            <el-date-picker @change="getRollData()" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                                v-model="rollF.time" type="daterange" range-separator="To"
                                start-placeholder="Start date" end-placeholder="End date" />
                        </div>
                        &nbsp;
                        &nbsp;
                        <div style="display: flex;align-items:center;">
                            轧辊类型
                            &nbsp;
                            <el-select @change="getRollData()" v-model="rollF.RollType" style="width: 110px"
                                placeholder="轧辊类型">
                                <el-option label="一中间辊" value="一中间辊" />
                                <el-option label="二中间辊" value="二中间辊" />
                                <el-option label="工作辊" value="工作辊" />
                                <el-option label="支撑辊" value="支撑辊" />
                            </el-select>
                        </div>
                        &nbsp;
                        &nbsp;
                        <el-button type="primary" size="mini" class="button" color="#36f"
                            @click="rollF.pageIndex = 1, getRollData();">查询</el-button>
                    </div>

                    <el-table :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#666' }"
                        style="margin-top: 10px;width: 100%;height: 280px " max-height="380" :data="tableDataRoll"
                        class="table">
                        <el-table-column prop="rollType" label="轧辊类型"></el-table-column>
                        <el-table-column prop="num" label="辊框号"></el-table-column>
                        <el-table-column prop="position" label="辊框位置"></el-table-column>

                        <el-table-column prop="createTime" label="提交时间"></el-table-column>
                        <el-table-column prop="author" label="提交人"></el-table-column>
                        <el-table-column label="操作" width="170">
                            <template #default="scope">

                                <el-button type="primary" @click="selectProductName(scope.row, 4)">详情</el-button>
                            </template>
                        </el-table-column>
                        <template v-slot:empty>
                            <el-empty description="暂无数据" />
                        </template>
                    </el-table>
                    <el-pagination style="margin: 20px auto" page-size="50" @current-change="handlePageChange"
                        background layout="prev, pager, next" :total="rollF.dataCount" />
                </el-card>

                <div v-if="status == 3"
                    style="display: flex;flex-wrap: wrap;justify-content: space-between;white-space: nowrap;">
                    <el-card class="zxt" hadow="always">
                        <el-tabs v-model="activeZxt" type="card">
                            <el-tab-pane label="任务量趋势图" name="任务量">
                                <RwlChart :id="'RwlChart'" :option="optionRwl" />

                            </el-tab-pane>
                            <el-tab-pane label="磨削量统计图" name="磨削量">
                                <MxlChart :id="'MxlChart'" :option="optionMxl" />
                            </el-tab-pane>
                        </el-tabs>
                        <el-card style="width: 100%px;padding: 2px" shadow="hover">
                            <el-table :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#666' }"
                                max-height="220" height="220" style="margin-top: 10px;width: 100%" :data="tableDataZt"
                                class="table">
                                <el-table-column prop="equipmentName" label="设备名称"></el-table-column>
                                <el-table-column prop="mapChineseMap.equipmentStatus.statusChinese" label="设备状态">
                                    <template #default="scope">
                                        <div style="margin: 0 auto;width: 55px;">
                                            <div class="droptarget"
                                                style="background-color: green;width:20px;height:20px;">
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="mainTaskNo" label="故障状态">
                                    <template #default="scope">
                                        <div style="margin: 0 auto;width: 55px;">
                                            <div class="droptarget"
                                                style="background-color: red;width:20px;height:20px;"></div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="equipmentStatusUpdateTime" width="170"
                                    label="更新时间"></el-table-column>
                                <el-table-column label="故障详情" width="120">
                                    <template #default="scope">
                                        <el-button type="primary"
                                            @click="selectProductName(scope.row, 3)">故障详情</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </el-card>
                </div>

            </el-drawer>

        </div>
    </el-card>
    <el-dialog v-model="dialogVisibleItem" :width="itemStatus == 1 ? '20%' : '50%'"
        :title="itemStatus == 1 ? '排产' : itemStatus == 2 ? '辊框详情' : itemStatus == 3 ? '故障详情' : '辊框详情'" draggable>
        <div v-if="itemStatus == 1">
            任务类型
            <el-select v-model="formF.MainTaskType" placeholder="请选择" style="width: 80%">
                <el-option v-for="item in columnsE" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <br />
            <br />
            起点区域
            <el-input v-model="item.locationRegion" disabled style="width: 80%" placeholder="起点区域" clearable />
            <br />
            <br />
            起点位置
            <el-input v-model="item.locationName" disabled style="width: 80%" placeholder="起点位置" clearable />
            <div v-if="formF.MainTaskType == 4">

                <br />
                终点区域
                <el-select v-model="formF.processRegionEnd" @change="getRegion" placeholder="请选择" style="width: 80%">
                    <el-option v-for="item in locationList" :key="item.locationRegion" :label="item.locationRegion"
                        :value="item.locationRegion" />
                </el-select>
                <br />
                <br />
                终点位置
                <el-select v-model="formF.processEndPoint" placeholder="请选择" style="width: 80%">
                    <el-option v-for="item in columnsC" :key="item.locationName" :label="item.locationName"
                        :value="item.locationName" />
                </el-select>
            </div>
        </div>
        <el-table v-if="itemStatus == 2" :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#666' }"
            :data="tableItem" border>
            <el-table-column prop="productCardSlot" label="槽号" width="60"></el-table-column>
            <el-table-column prop="productName" label="轧辊号"></el-table-column>
            <el-table-column label="轧辊状态">
                <template #default="scope">
                    <span v-if="scope.row.productStatus == 1">黑辊</span>
                    <span v-if="scope.row.productStatus == 2">白辊</span>
                    <span v-if="scope.row.productStatus == 3">异常辊</span>
                    <span v-if="scope.row.productStatus == 4">事故辊</span>
                </template>
            </el-table-column>
            <el-table-column prop="productDiameter" label="轧辊直径(mm)"></el-table-column>
            <el-table-column label="轧辊类型">
                <template #default="scope">
                    <span v-if="scope.row.rollType == 1">中间辊</span>
                    <span v-if="scope.row.rollType == 2">工作辊</span>
                    <span v-if="scope.row.rollType == 3">二中间辊</span>
                    <span v-if="scope.row.rollType == 4">支撑辊</span>
                </template>
            </el-table-column>
            <template v-slot:empty>
                <el-empty description="暂无数据" />
            </template>
        </el-table>
        <el-table v-if="itemStatus == 4" :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#666' }"
            :data="tableItem" border>
            <el-table-column prop="rollnum1" label="轧辊号"></el-table-column>
            <el-table-column prop="diameter1" label="直径(mm)"></el-table-column>
            <el-table-column prop="rough1" label="粗糙度"></el-table-column>
            <el-table-column prop="taper1" label="锥度"></el-table-column>
            <el-table-column prop="concavity1" label="凸度"></el-table-column>
            <el-table-column prop="spare1" label="凸度"></el-table-column>

            <template v-slot:empty>
                <el-empty description="暂无数据" />
            </template>
        </el-table>
        <el-table v-if="itemStatus == 3" :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#666' }"
            :data="tableFault" border>
            <el-table-column prop="FaultName" label="故障名称">

            </el-table-column>
            <el-table-column prop="FaultNr" label="故障内容">

            </el-table-column>
            <el-table-column prop="FaultTime" label="时间">

            </el-table-column>
            <template v-slot:empty>
                <el-empty description="暂无数据" />
            </template>
        </el-table>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisibleItem = false">关闭</el-button>
                <el-button v-if="itemStatus == 1" type="primary" @click="submit">
                    确认排产
                </el-button>
            </div>
        </template>
    </el-dialog>
    <el-dialog v-model="dialogVisibleTask" title="子任务列表" width="80%" draggable>
        <el-table style="margin-top: 10px;width: 100% "
            :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#666' }" :data="tableDataCz" border class="table">
            <el-table-column prop="processRegionStart" label="起点区域"></el-table-column>
            <el-table-column prop="processStartPoint" label="起点位置"></el-table-column>
            <el-table-column prop="processRegionEnd" label="终点区域"></el-table-column>
            <el-table-column prop="processEndPoint" label="终点位置"></el-table-column>
            <el-table-column prop="processLevel" label="优先级"></el-table-column>
            <el-table-column prop="processCreateTime" width="200" label="创建时间"></el-table-column>
            <el-table-column prop="processFinishTime" width="200" label="完成时间"></el-table-column>
            <el-table-column label="执行状态">
                <template #default="scope">
                    <span v-if="scope.row.processStatus == 1">等待接收任务</span>
                    <span v-if="scope.row.processStatus == 2">任务已发送</span>
                    <span v-if="scope.row.processStatus == 3">任务已完成</span>
                    <span v-if="scope.row.processStatus == 4">重发机制</span>
                    <span v-if="scope.row.processStatus == 5">任务异常</span>
                    <span v-if="scope.row.processStatus == 6">取料完成</span>
                    <span v-if="scope.row.processStatus == 7">货物运输中</span>
                    <span v-if="scope.row.processStatus == 8">等待设备接收</span>
                </template>
            </el-table-column>
            <el-table-column prop="processStepStatus" label="步骤"></el-table-column>
            <el-table-column prop="productBoxRollNo" width="200" label="产品流水号"></el-table-column>
            <template v-slot:empty>
                <el-empty description="暂无数据" />
            </template>
        </el-table>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisibleTask = false">关闭</el-button>

            </div>
        </template>
    </el-dialog>
    <el-dialog v-model="dialogVisible" title="轧辊信息" width="50%" draggable>
        <!-- <el-button type="primary" @click="">轧辊下机排程</el-button>
        <br />
        <br /> -->
        <el-tabs v-model="activeName" type="border-card">
            <el-tab-pane label="一层" name="一层">
                <el-table :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#666' }" width="100%"
                    style="width: 100% " :data="tableItem1">
                    <el-table-column prop="productCardSlot" label="辊槽号" width="90"></el-table-column>
                    <el-table-column prop="productName" label="轧辊号"></el-table-column>
                    <el-table-column label="轧辊状态">
                        <template #default="scope">
                            <span v-if="scope.row.productStatus == 1">黑辊</span>
                            <span v-if="scope.row.productStatus == 2">白辊</span>
                            <span v-if="scope.row.productStatus == 3">异常辊</span>
                            <span v-if="scope.row.productStatus == 4">事故辊</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="productDiameter" label="轧辊直径(mm)"></el-table-column>
                    <el-table-column label="轧辊类型">
                        <template #default="scope">
                            <span v-if="scope.row.rollType == 1">中间辊</span>
                            <span v-if="scope.row.rollType == 2">工作辊</span>
                            <span v-if="scope.row.rollType == 3">二中间辊</span>
                            <span v-if="scope.row.rollType == 4">支撑辊</span>
                        </template>
                    </el-table-column>
                    <template v-slot:empty>
                        <el-empty description="暂无数据" />
                    </template>
                </el-table>
            </el-tab-pane>
            <el-tab-pane v-if="floor > 1" label="二层" name="二层">
                <el-table :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#666' }" width="100%"
                    style="width: 100% " :data="tableItem2">
                    <el-table-column prop="productCardSlot" label="辊槽号" width="90"></el-table-column>
                    <el-table-column prop="productName" label="轧辊号"></el-table-column>
                    <el-table-column label="轧辊状态">
                        <template #default="scope">
                            <span v-if="scope.row.productStatus == 1">黑辊</span>
                            <span v-if="scope.row.productStatus == 2">白辊</span>
                            <span v-if="scope.row.productStatus == 3">异常辊</span>
                            <span v-if="scope.row.productStatus == 4">事故辊</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="productDiameter" label="轧辊直径(mm)"></el-table-column>
                    <el-table-column label="轧辊类型">
                        <template #default="scope">
                            <span v-if="scope.row.rollType == 1">中间辊</span>
                            <span v-if="scope.row.rollType == 2">工作辊</span>
                            <span v-if="scope.row.rollType == 3">二中间辊</span>
                            <span v-if="scope.row.rollType == 4">支撑辊</span>
                        </template>
                    </el-table-column>
                    <template v-slot:empty>
                        <el-empty description="暂无数据" />
                    </template>
                </el-table>
            </el-tab-pane>
            <el-tab-pane v-if="floor == 3" label="三层" name="三层">
                <el-table :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#666' }" width="100%"
                    style="width: 100% " :data="tableItem3">
                    <el-table-column prop="productCardSlot" label="辊槽号" width="90"></el-table-column>
                    <el-table-column prop="productName" label="轧辊号"></el-table-column>
                    <el-table-column label="轧辊状态">
                        <template #default="scope">
                            <span v-if="scope.row.productStatus == 1">黑辊</span>
                            <span v-if="scope.row.productStatus == 2">白辊</span>
                            <span v-if="scope.row.productStatus == 3">异常辊</span>
                            <span v-if="scope.row.productStatus == 4">事故辊</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="productDiameter" label="轧辊直径(mm)"></el-table-column>
                    <el-table-column label="轧辊类型">
                        <template #default="scope">
                            <span v-if="scope.row.rollType == 1">中间辊</span>
                            <span v-if="scope.row.rollType == 2">工作辊</span>
                            <span v-if="scope.row.rollType == 3">二中间辊</span>
                            <span v-if="scope.row.rollType == 4">支撑辊</span>
                        </template>
                    </el-table-column>
                    <template v-slot:empty>
                        <el-empty description="暂无数据" />
                    </template>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">关闭</el-button>
                <!-- <el-button type="primary" @click="dialogVisible = false">
                    Confirm
                </el-button> -->
            </div>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { getTableLocationLocationName, getTableLocationLocationRegionList, SelecthistorySon, selectTableEquipmentMachineAll, Selecthistory, selectTableLocationEntire, selectTableLocationTotalList, selectTableLocationProductList, selectTableMaintaskInfoList, insertTableMaintaskInfo, updateMaintaskInformation, WGHomeT500, T500history, updateMaintaskErrorInformation } from '@/api'
import { Alex } from '@/types';
import { ElMessage, ElMessageBox } from 'element-plus';
import * as echarts from 'echarts';
import RwlChart from "@/components/Chart.vue";
import MxlChart from "@/components/Chart.vue";
const status = ref(1)
const dialogVisible = ref(false)
const item: any = ref()
const tableFault = ref([
    {
        FaultName: 'AGV设备断电',
        FaultNr: '电源未接通',
        FaultTime: '2024-08-27 14:30:20'
    }
])
const dialogVisibleItem = ref(false)
const dialogVisibleTask = ref(false)
const drawer = ref(false)
const activeName = ref('一层')
const activeZxt = ref('任务量')
const itemStatus = ref(1)
const tableData = ref([]);
const columns: any = ref([]);
const tableDataBg = ref([]);
const tableDataCz = ref([]);
const tableDataRoll = ref([]);
const alex = new Alex
const rollF = ref({
    time: [],
    RollType: '',
    pageIndex: 1,
    dataCount: 0
})
const rollForm = ref({
    RollType: '',
    Num: '',
    Allnum: '',
    Author: '张三',
    Position: '',
    Rollnum1: '',
    Rollnum2: '',
    Rollnum3: '',
    Rollnum4: '',
    Rollnum5: '',
    Rollnum6: '',
    Diameter1: '',
    Diameter2: '',
    Diameter3: '',
    Diameter4: '',
    Diameter5: '',
    Diameter6: '',
    rough1: '',
    rough2: '',
    rough3: '',
    rough4: '',
    rough5: '',
    rough6: '',
    Taper1: '',
    Taper2: '',
    Taper3: '',
    Taper4: '',
    Taper5: '',
    Taper6: '',
    concavity1: '',
    concavity2: '',
    concavity3: '',
    concavity4: '',
    concavity5: '',
    concavity6: '',
    spare1: '',
    spare2: '',
    spare3: '',
    spare4: '',
    spare5: '',
    spare6: '',
})

const tableDataZt = ref([
    {
        equipmentName: 'AGV',
        equipmentStatusUpdateTime: '2024-08-23 14:32:20'
    },
    {
        equipmentName: '磨床',
        equipmentStatusUpdateTime: '2024-08-13 16:32:50'

    }
]);
const tableItem = ref([]);
const tableItem1 = ref([]);
const tableItem2 = ref([]);
const tableItem3 = ref([]);
const floor = ref(0);

const locationList: any = ref([]);
const ListA: any = ref([]);
const ListB: any = ref([]);
const columnsC: any = ref([]);
const columnsE: any = ref([
    {
        label: '入库任务',
        value: 1,
    },
    {
        label: '出库任务',
        value: 2,
    },
    {
        label: '单步任务',
        value: 4,
    },
]);
const ListC: any = ref([]);
const ListD: any = ref([]);
const ListE: any = ref([]);
const ListF: any = ref([]);
const ListG: any = ref([]);
const ListH: any = ref([]);
const labelOption: any = {
    normal: {
        show: true,
        lineHeight: 25,
        width: 50,
        height: 25,
        backgroundColor: 'rgba(0,214,235,0.1)',
        borderRadius: 200,
        position: ['-18', '-35'],
        distance: 1,
        formatter: [
            '    {d|}',
            ' {a|{c}}     \n',
            '    {b|}'
        ].join(''),
        rich: {
            d: {
                color: '#3CDDCF',
            },
            a: {
                color: 'black',
                align: 'center',
            },
        }
    }
}
const optionRwl: any = {
    title: {
        text: '任务量趋势图'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['任务量']
    },
    grid: {

    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        data: ['8.16', '8.19', '8.20', '8.21', '8.22', '8.23', '8.26']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '任务量',
            type: 'line',
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            // 开启动画
            animation: true,
            // 平滑曲线
            smooth: false,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(0,164,235,1)' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: 'rgba(0,77,167,1)' // 100% 处的颜色
                    }], false),
                    barBorderRadius: [20, 20, 0, 0],
                    shadowColor: 'rgba(0,160,221,1)',
                    shadowBlur: 4,
                }
            },
            label: labelOption
        }
    ]
}
const optionMxl: any = {
    title: {
        text: '磨削量统计图'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['磨削量']
    },
    grid: {
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        data: ['8.16', '8.19', '8.20', '8.21', '8.22', '8.23', '8.26']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '磨削量',
            type: 'bar',
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            // 开启动画
            animation: true,
            // 平滑曲线
            smooth: false,
            barWidth: '15px',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(0,214,235,1)' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: 'rgba(0,77,167,1)' // 100% 处的颜色
                    }], false),
                    barBorderRadius: [20, 20, 0, 0],
                    shadowColor: 'rgba(0,160,221,1)',
                    shadowBlur: 4,
                }
            },
            label: labelOption
        }
    ]
}
const form = ref({
    mainTaskType: 1,
    mainFinishStatus: -1,
    page: 1,
    size: 10
})
const formF = ref({
    MainTaskType: null,
    processRegionEnd: null,
    processEndPoint: null,
})
const formx = ref({
    rollType: 1,
    productName: null,
    position: '',
    endProductDiameter: '',
    originProductDiameter: '',
})
// 行点击查询子任务
const RowSelect = (e: any) => {
    dialogVisibleTask.value = true;
    tableDataCz.value = e.getTableSteporderList
}
const rollSubmit = () => {
    ElMessageBox.confirm(
        '请确认是否备辊?',
        '二次确认',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        console.log(rollForm.value);
        // 统计 Rollnum1 到 Rollnum6 有值的数量
        let count = Object.keys(rollForm.value).filter(key =>
            /^Rollnum\d+$/.test(key) && rollForm.value[key] !== ''
        ).length;
        rollForm.value.Author = '张三'
        // 备辊
        WGHomeT500(JSON.stringify(rollForm.value)).then((res: any) => {
            // 备辊2
            T500history(JSON.stringify(rollForm.value)).then((res: any) => {
                ElMessage({
                    type: 'success',
                    message: '提交成功',
                })
                drawer.value = false
            })
        })

    })
}
// 智能备辊确认任务
const submit = () => {
    ElMessageBox.confirm(
        '请确认是否排产?',
        '二次确认',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            alex.parameter = {
                mainInfo: {
                    mainTaskType: formF.value.MainTaskType,
                    mainBoxName: '',
                    mainOrder: '-1'
                },
                stepInfo: {
                    equipmentNo: 1,
                    processRegionStart: item.value.locationRegion ? item.value.locationRegion : '',
                    processStartPoint: item.value.locationName ? item.value.locationName : '',
                    processRegionEnd: formF.value.processRegionEnd ? formF.value.processRegionEnd : '',
                    processEndPoint: formF.value.processEndPoint ? formF.value.processEndPoint : ''
                },
                rollList: tableItem.value
            }
            console.log(alex.parameter, '任务类型');

            // if ( form.value.MainTaskType.value != 4) {
            //     alex.parameter.stepInfo.processRegionEnd = ''
            //     alex.parameter.stepInfo.processEndPoint = ''
            //     alex.parameter.mainInfo.mainOrder =  form.value.mainOrder
            // }
            insertTableMaintaskInfo(alex).then((res: any) => {
                ElMessage({
                    type: 'success',
                    message: '成功',
                })
                dialogVisibleItem.value = false
            })

        })
        .catch(() => {

        })
}
// 获取数据
const getData = () => {
    alex.parameter = formx.value
    alex.parameter.endProductDiameter = alex.parameter.endProductDiameter != '' ? parseFloat(alex.parameter.endProductDiameter).toFixed(2) : '0.00'
    alex.parameter.originProductDiameter = alex.parameter.originProductDiameter != '' ? parseFloat(alex.parameter.originProductDiameter).toFixed(2) : '0.00'
    getTableLocationLocationName(alex).then((res: any) => {
        tableDataBg.value = res.result.list
    })
}
const getRollData = () => {
    console.log(rollF.value.time);

    let data = {
        BeginTime: rollF.value.time ? rollF.value.time[0] : '',
        EndTime: rollF.value.time ? rollF.value.time[1] : '',
        RollType: rollF.value.RollType,
        pageIndex: rollF.value.pageIndex,
        pageSize: 10
    }

    Selecthistory(JSON.stringify(data)).then((res: any) => {
        console.log(res);

        tableDataRoll.value = res.returnPoint;
        rollF.value.dataCount = res.dataCount;
    })
}
// 获取区域
const getRegion = (val: any) => {
    formF.value.processEndPoint = null
    alex.parameter = {
        locationRegion: val,
        locationStatus: 1
    }
    getTableLocationLocationRegionList(alex).then((res: any) => {
        columnsC.value = res.result.list;
    })
}
const handleClose = (done: () => void) => {
    done();
    // ElMessageBox.confirm('Are you sure you want to close this?')
    //     .then(() => {
    //         done()
    //     })
    //     .catch(() => {
    //         // catch error
    //     })
}
const resetRollForm = () => {
    for (const key in rollForm.value) {
        if (rollForm.value.hasOwnProperty(key)) {
            rollForm.value[key] = '';
        }
    }
};

const selectProductName = (row: any, i: any) => {
    switch (i) {
        case 1:
            item.value = row;
            itemStatus.value = 1
            break;

        case 2:
            itemStatus.value = 2
            tableItem.value = row.tableProductList
            break;
        case 3:
            itemStatus.value = 3
            break;
        case 4:
            SelecthistorySon(row.id).then((res: any) => {
                tableItem.value = res
            })
            itemStatus.value = 4;
            break;
    }
    dialogVisibleItem.value = true
}
const handlePageChange = (val: any) => {
    rollF.value.pageIndex = val;
    getRollData();
}
const handlePageChange2 = (val: any) => {
    form.value.page = val;
    selectTask();
}
onMounted(() => {
    // 设备状态查询
    selectTableEquipmentMachineAll(alex).then((res: any) => {
        // tableDataZt.value = res.result.list
    })
    selectTask();
    // 所有位置区域查询
    selectTableLocationEntire(alex).then((res: any) => {
        locationList.value = res.result.list
    })
    // 所有点位查询
    selectTableLocationTotalList(alex).then((res: any) => {
        let list = res.result.listPoint;
        columns.value = list
        for (let i = 0; i < list.length; i++) {
            if (list[i].locationFloorStatus == 1) {
                switch (list[i].locationName) {
                    // B
                    case 'A1':
                        ListB.value.push(list[i]);
                        break;
                    case 'A2':
                        ListB.value.push(list[i]);
                        break;
                    case 'A3':
                        ListB.value.push(list[i]);
                        break;
                    // C
                    case 'B1':
                        ListC.value.push(list[i]);
                        break;
                    case 'B2':
                        ListC.value.push(list[i]);
                        break;
                    case 'B3':
                        ListC.value.push(list[i]);
                        break;
                    case 'B4':
                        ListC.value.push(list[i]);
                        break;
                    case 'B5':
                        ListC.value.push(list[i]);
                        break;
                    // A
                    case 'D1':
                        ListA.value.push(list[i]);
                        break;
                    case 'D2':
                        ListA.value.push(list[i]);
                        break;
                    case 'D3':
                        ListA.value.push(list[i]);
                        break;
                    case 'D4':
                        ListA.value.push(list[i]);
                        break;
                    case 'D5':
                        ListA.value.push(list[i]);
                        break;
                    // D
                    case 'E1':
                        ListD.value.push(list[i]);
                        break;
                    case 'E2':
                        ListD.value.push(list[i]);
                        break;
                    case 'E3':
                        ListD.value.push(list[i]);
                        break;
                    case 'E4':
                        ListD.value.push(list[i]);
                        break;
                    case 'E5':
                        ListD.value.push(list[i]);
                        break;
                    case 'E6':
                        ListD.value.push(list[i]);
                        break;
                    //F
                    case 'F1':
                        ListH.value.push(list[i]);
                        break;
                    // E
                    case 'G1':
                        ListE.value.push(list[i]);
                        break;
                    case 'G2':
                        ListE.value.push(list[i]);
                        break;
                    // F
                    case 'G3':
                        ListF.value.push(list[i]);
                        break;
                    case 'G4':
                        ListF.value.push(list[i]);
                        break;
                    case 'G5':
                        ListF.value.push(list[i]);
                        break;
                    case 'G6':
                        ListF.value.push(list[i]);
                        break;
                    // G
                    case 'C1':
                        ListG.value.push(list[i]);
                        break;
                    case 'C2':
                        ListG.value.push(list[i]);
                        break;
                    case 'C3':
                        ListG.value.push(list[i]);
                        break;
                    case 'C4':
                        ListG.value.push(list[i]);
                        break;
                    case 'C5':
                        ListG.value.push(list[i]);
                        break;
                }
            }

        }

    })
})
const total = ref(0)
const selectTask = () => {
    alex.parameter = form.value;
    selectTableMaintaskInfoList(alex).then((res: any) => {
        tableData.value = res.result.list.list
        total.value = res.result.list.total
    })
}
// 查询轧辊信息
const getItem = (e: any) => {
    activeName.value = '一层'
    console.log(e);
    alex.parameter = {
        tableLocationObject: JSON.parse(JSON.stringify(e))
    }
    delete alex.parameter.tableLocationObject.statusAdjustment

    console.log(JSON.stringify(alex));
    selectTableLocationProductList(alex).then((res: any) => {
        tableItem1.value = res.result.list.productBoxRollNoFirstList
        tableItem2.value = res.result.list.productBoxRollNoSecondList
        tableItem3.value = res.result.list.productBoxRollNoThirdList
        floor.value = res.result.floor
        dialogVisible.value = true;
    })
}
const upd = (row: any) => {
    let alex = new Alex
    alex.parameter = {
        mainInfo: row
    }
    delete alex.parameter.mainInfo.statusAdjustment
    delete alex.parameter.mainInfo.getTableSteporderList

    ElMessageBox.confirm(
        '确认终止该任务?',
        '',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            updateMaintaskErrorInformation(alex).then((res: any) => {
                ElMessage({
                    message: '操作成功！',
                    type: 'success',
                })
                selectTask();
            })
        })
}
const updlevel = (val: any, row: any) => {
    console.log(val, row);

    let alex = new Alex
    alex.parameter = {
        mainInfo: JSON.parse(JSON.stringify(row))
    }
    delete alex.parameter.mainInfo.statusAdjustment
    delete alex.parameter.mainInfo.getTableSteporderList
    alex.parameter.mainInfo.processLevel = parseInt(val)
    updateMaintaskInformation(alex).then((res: any) => {
        ElMessage({
            message: '操作成功！',
            type: 'success',
        })
        selectTask();
    })
}

const dle = (row: any) => {
    let alex = new Alex
    alex.parameter = {
        id: row.eid
    }
    ElMessageBox.confirm(
        '确认删除?',
        '',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            // deleteAgvCarryById(alex).then((res: any) => {
            //     ElMessage({
            //         message: '操作成功！',
            //         type: 'success',
            //     })
            //     selectDtat();
            // })
        })
}

</script>
<style scoped>
.zxt {
    width: 680px;
    /* border-radius: 15px; */
    height: 610px;
    /* position: fixed; */
    /* right: 36px; */
    /* top: 116px; */
}

.droptarget {
    width: 5px;
    height: 5px;
    line-height: 5px;
    padding: 5px;
    z-index: 200px;
    border-radius: 100%;
    text-align: center;
    border: 1px solid #aaaaaa;
}

.msgbox {
    width: 500px;
    /* height: 200px; */
    display: flex;
    align-items: center;
    position: fixed;
    top: 75px;
    left: 260px;
    padding: 15px;
    text-align: center;

    span {
        color: rgb(0, 0, 0);
        margin: 0 5px;
    }
}

.cb {
    transform: rotate(360deg);
    width: 35px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    color: white;
    position: fixed;
    font-size: 14px;
    font-weight: bold;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    background-color: #36f;
}

.cbl {

    right: 0;
    top: 11%;
}

.cbl2 {

    right: 0;
    top: 25%;

}

.cbl3 {
    right: 0;
    top: 39%;
}

.cbl4 {
    right: 0;
    top: 53%;
}

:deep(.el-card__body) {
    padding: 5px;
}

.gj1 {
    background-color: red;
    width: 5px;
    height: 5px;
    border-radius: 100%;
    position: relative;
    left: -8px;
    top: -18px;
    border: 0.5px solid slategray
}

.gj2 {
    background-color: green;
    width: 5px;
    height: 5px;
    border-radius: 100%;
    position: relative;
    left: -8px;
    top: -15px;
    border: 0.5px solid slategray
}

.gj3 {
    background-color: red;
    width: 5px;
    height: 5px;
    border-radius: 100%;
    position: relative;
    left: -8px;
    top: -12px;
    border: 0.5px solid slategray
}

.table {
    /* height: 70vh; */
    margin: 0px auto 0px auto;
    width: 96%;
}

span {
    cursor: pointer;
}

.el-tabs {
    display: block;
}

:deep(.el-tabs) {
    display: block;
}

/* :deep(.el-input__wrapper) {
    background-color: #252547;
    border-color: #13132b;
    color: #fff;
    box-shadow: none;
}
*/
:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
    background: #36f;
}

/* .tableBox {
    background-color: #222b45;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
} */

.tableTop {
    width: 100%;
    margin-bottom: 20px;
    padding: 1.2rem 2rem;
    color: white;
    font-weight: 600;
    border-bottom: 2px solid #1b1b38;
}

.box {
    /* width: 1600px; */
    display: flex;
    height: 80vh;
    margin: 0 auto;
}


.bor1 {
    position: absolute;
    top: 130px;
    right: 40px;
    width: 650px;
    height: 570px;
}

.boxx {
    width: 30px;
    height: 10px;
    line-height: 10px;
    padding: 10px;
    z-index: 200px;
    text-align: center;
    /* position: relative; */
    cursor: pointer;
    border: 2px solid #a5a5a5;
    background-color: #cdcdcd69;
}

.P {
    float: left
}

.A {
    position: absolute;
    display: flex;
    left: 605px;
    top: 420px;

    .boxx {
        margin-right: 32px;
    }
}

@media screen and (max-height: 1000px) {
    .A {}
}

@media screen and (max-width: 1720px) {
    .A {}
}

.B {
    position: absolute;
    display: flex;
    left: 569px;
    top: 276px;

    .boxx {
        margin-right: 35px;
    }
}

.C {
    position: absolute;
    display: flex;
    left: 818px;
    top: 276px;

    .boxx {
        margin-right: 10px;
        /* background-color: #36f; */
        color: black;
    }
}

.D {
    position: absolute;
    display: flex;
    left: 385px;
    top: 560px;

    .boxx {
        margin-right: 26px;
        /* background-color: rgb(255, 51, 51); */
        color: black;
    }
}

.H {
    position: absolute;
    display: flex;
    left: 897px;
    top: 560px;

    .boxx {
        margin-right: 26px;
        color: black;
    }
}

.E {
    position: absolute;
    display: flex;
    right: 598px;
    bottom: 278px;

    .boxx {
        margin-right: 30px;
    }
}

.F {
    position: absolute;
    display: flex;
    right: 185px;
    bottom: 278px;

    .boxx {
        margin-right: 23px;
        /* background-color: rgb(51, 255, 68); */
        color: black;
    }
}

.G {
    position: absolute;
    /* display: flex; */
    left: 300px;
    top: 329px;

    .boxx {
        margin-bottom: 43px;
        margin-right: 35px;
        /* background-color: rgb(255, 51, 51); */
        color: black;
    }
}

.tableBox {
    width: 100%;
    height: 90vh;
    box-shadow: 0 0 transparent, 0 0 transparent, 0 1px 3px #0000001a, 0 1px 2px -1px #0000001a;
    border: 1px solid #e9e9eb;
    background-image: url(../assets/bg.jpg);
    /* 背景图垂直、水平均居中 */
    background-position: center center;
    /* 背景图不平铺 */
    background-repeat: no-repeat;
    /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
    /* background-attachment: fixed; */
    /* 让背景图基于容器大小伸缩 */
    background-size: cover;
    background-color: #f1f1f1;
    /* 设置背景颜色，背景图加载过程中会显示背景色 */
    background-size: 100%;
    border-radius: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    zoom: 1;
}
</style>